<template>
	<view class="login-box">
		<!-- 自定义表单校验 -->
		<uni-forms class="login-form" ref="customForm" label-width="0px" :rules="fromRules" :modelValue="formData">
			<uni-forms-item label="" name="phone">
				<view class="login-form-input">
					<text class="login-form-input-label">手机号</text>
					<input v-model="formData.phone" trim="both" type="text" confirm-type="next"
						prefixIcon="person-filled" @confirm="handleConfirm" />
				</view>
			</uni-forms-item>
			<uni-forms-item label="" name="password">
				<view class="login-form-input">
					<text class="login-form-input-label">密码</text>
					<input v-model="formData.password" :focus="isFocus" type="password" trim="both" password-icon
						confirm-type="done" prefixIcon="locked-filled" />
				</view>
			</uni-forms-item>
		</uni-forms>

		<view class="btns">
			<button type="primary" size="mini" plain style="flex: 1" @click="onVisitorLogin">
				游客
			</button>

			<button type="primary" size="mini" style="flex: 1" @click="submit">
				登录
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserByPassword
	} from '@/apis/users.js';
	import {
		useUserStore
	} from '@/stores/user.js';
	export default {
		name: 'LoginBox',
		data() {
			return {
				isFocus: false,
				// 自定义表单数据
				formData: {
					phone: '12312341234',
					password: '123456',
				},
				// 自定义表单校验规则
				fromRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '清输入账号',
						}, ],
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '清输入密码',
						}, ],
					},
				},
			};
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.fromRules);
		},
		methods: {
			login() {
				const that = this;
				getUserByPassword({
					phone: that.formData.phone,
					password: that.formData.password,
				}).then((res) => {
					// console.log('res', res);
					if (!res.data) {
						uni.showToast({
							icon: 'error',
							title: '手机号或密码错误',
						});

						return;
					}

					useUserStore().saveUser(res.data);
					uni.redirectTo({
						url: '../../pages/index/index',
					});
				});
			},

			async submit() {
				const that = this;
				this.$refs.customForm
					.validate()
					.then((res) => {
						// 表单验证成功
						// console.log(res);
						that.login();
					})
					.catch((err) => {
						console.log('err', err);
					});

				// const result = await this.$refs.customForm.validate();
				// console.log('result', result);
			},
			// 游客登录
			onVisitorLogin() {
				console.log('游客');
				useUserStore().saveUser({
					id: 0,
					role: 0
				});
				uni.redirectTo({
					url: '../../pages/index/index',
				});
			},
			handleConfirm() {
				this.isFocus = false;
				this.$nextTick(() => {
					this.isFocus = true;
				});
			},
		},
	};
</script>

<style scoped>
	.login-form {
		margin: 0 auto;
		/* background-color: pink; */
	}

	.login-form-input {
		display: flex;
		align-items: center;
		background-color: #f2f3f7;
		height: 90rpx;
		border-radius: 20rpx;
	}

	.login-form-input-label {
		width: 90rpx;
		margin: 0 28rpx;
	}

	.btns {
		display: flex;
		justify-content: space-between;
		gap: 56rpx;
		margin-top: 48rpx;
	}
</style>